<template>
	<view>
		<u-sticky offset-top="10">
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>填写进度</text>
					</u-col>
					<u-col span="10">
						<view style="margin-top: 10px;">
							<u-line-progress :percentage="percentage" />
						</view>
					</u-col>
				</u-row>
			</uni-card>
		</u-sticky>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="applyInFo" :rules="rules" ref="applyInFoForm">
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>个人照片</text>
					</u-col>
					<u-col span="10">
						<u-form-item
							prop="applyPhoto"
							borderBottom
							ref="applyPhoto">
							<u--image
								width="80"
								height="80"
								:src="applyInFo.applyPhoto" 
								shape="square"
								mode="aspectFill"
								@click="upload()"
							></u--image>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>姓名</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyName" borderBottom ref="applyName">
							<u--input @blur=computedWidth(applyInFo.applyName,1) v-model="applyInFo.applyName"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>报名专业</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="majorId" borderBottom ref="majorId">
							<u-action-sheet :actions="majorList" :show="majorShow" cancelText="取消" @close="sheetClose()"
								@select="majorSelectClick" v-model="applyInFo.majorId"></u-action-sheet>
							<u-button @click="majorShow = true">
								<u--text type="info" :text="major"></u--text>
							</u-button>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>报名时间</text>
					</u-col>
					<u-col span="10" align="left">
						<u-form-item prop="applyTime" borderBottom ref="applyTime">
							<u-datetime-picker :show="timeShow" v-model="applyInFo.applyTime" mode="datetime"
								@confirm="timeSelectClick(applyInFo.applyTime)"></u-datetime-picker>
							<u-button @click="timeShow = true" :text="applyTime" class="custom-style"></u-button>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>手机号</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyPhone" borderBottom ref="applyPhone">
							<u--input v-model="applyInFo.applyPhone" border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>性别</text>
					</u-col>
					<u-col span="10">
						<u-action-sheet :actions="sexList" :show="sexShow" cancelText="取消" @close="sheetClose()"
							@select="sexSelectClick" v-model="applyInFo.applySex"></u-action-sheet>
						<u-button @click="sexShow = true">
							<u--text type="info" :text="applyInFo.applySex==0 ? '男':'女'"></u--text>
						</u-button>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>学历</text>
					</u-col>
					<u-col span="10">
						<u-action-sheet :actions="eduList" :show="eduShow" cancelText="取消" @close="sheetClose()"
							@select="eduSelectClick" v-model="applyInFo.educationId"></u-action-sheet>
						<u-button @click="eduShow = true">
							<u--text type="info" :text="edu"></u--text>
						</u-button>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>所学专业</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyOldMajor" borderBottom ref="applyOldMajor">
							<u--input @blur=computedWidth(applyInFo.applyOldMajor,2) v-model="applyInFo.applyOldMajor"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>邮箱</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyEmail" borderBottom ref="applyEmail">
							<u--input @blur=computedWidth(applyInFo.applyEmail,3) v-model="applyInFo.applyEmail"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>QQ号码</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyQqnumber" borderBottom ref="applyQqnumber">
							<u--input @blur=computedWidth(applyInFo.applyQqnumber,4) v-model="applyInFo.applyQqnumber"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>身份证</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyIdcard" borderBottom ref="applyIdcard">
							<u--input @blur=computedWidth(applyInFo.applyIdcard,5) type="idcard"
								v-model="applyInFo.applyIdcard" border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>家庭住址</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyAddress" borderBottom ref="applyAddress">
							<u--input @blur=computedWidth(applyInFo.applyAddress,6) v-model="applyInFo.applyAddress"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>监护人电话</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyFamilyPhone" borderBottom ref="applyFamilyPhone">
							<u--input @blur=computedWidth(applyInFo.applyFamilyPhone,7)
								v-model="applyInFo.applyFamilyPhone" border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>监护人关系</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="applyGuardian" borderBottom ref="applyGuardian">
							<u--input @blur=computedWidth(applyInFo.applyGuardian,8) v-model="applyInFo.applyGuardian"
								border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
			<uni-card v-if="false">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="2">
						<text>用户id</text>
					</u-col>
					<u-col span="10">
						<u-form-item prop="userId" borderBottom ref="userId">
							<u--input v-model="applyInFo.userId" :disabled=disUserId border="none">
							</u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</uni-card>
		</u--form>
	</view>
</template>

<script>
	export default {
		onNavigationBarButtonTap() {
			this.saveData();
		},
		data() {
			return {
				applyInForUrl: {
					getEduListUrl: "/education/education/educationList",
					getMajorListUrl: "/major/major/majorList",
					applyinfoAddUrl: "/applyinfo/applyInfo/addApplyInFor",
				},
				plan: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				disUserId: true,
				eduList: [{
					name: ""
				}],
				edu: "",
				eduShow: false,
				timeShow: false,
				applyTime: "",
				majorList: [{
					name: ""
				}],
				major: "",
				percentage: 12,
				applyInFo: {
					applyPhone: "",
					userId: ""
				},
				majorShow: false,
				sexShow: false,
				sexList: [{
						name: '男',
						sexValue: 0
					},
					{
						name: '女',
						sexValue: 1
					}
				],
				rules: {
					'applyInFo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		created() {
			const user = uni.getStorageSync("user");
			this.applyTime = uni.$u.timeFormat(new Date, 'yyyy/mm/dd hh:MM:ss');
			this.applyInFo.applyPhone = user.userPhone
			this.applyInFo.userId = user.userId
			/* 学历 */
			this.$axios.get(this.applyInForUrl.getEduListUrl).then((res) => {
				if (res.data.success) {
					this.eduList = res.data.result
					for (let i = 0; i < this.eduList.length; i++) {
						this.eduList[i].name = this.eduList[i].eduName
						if (this.eduList[i].eduId == this.applyInFo.educationId) {
							this.edu = this.eduList[i].name
						}
					}

				}
			})
			/* 专业 */
			this.$axios.get(this.applyInForUrl.getMajorListUrl).then((res) => {
				if (res.data.success) {
					this.majorList = res.data.result
					for (let i = 0; i < this.majorList.length; i++) {
						this.majorList[i].name = this.majorList[i].majorName
						if (this.majorList[i].majorId == this.applyInFo.majorId) {
							this.major = this.majorList[i].name
						}
					}

				}
			})
		},
		methods: {
			/* 进度条 */
			computedWidth(value, type) {
				if (this.plan[type] == 0) {
					if (value == "" || value == undefined) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请填写信息'
						});
					} else {
						this.percentage = uni.$u.range(0, 100, this.percentage + 8)
						this.plan[type] = 1
					}
				} else {
					if (value == "" || value == undefined) {
						this.percentage = uni.$u.range(0, 100, this.percentage - 8)
						this.plan[type] = 0
					}
				}
			},
			/* 关闭sheet */
			sheetClose() {
				this.sexShow = false
				this.timeShow = false
				this.majorShow = false
				this.eduShow = false
			},
			/* 性别点击 */
			sexSelectClick(index) {
				this.applyInFo.applySex = index.sexValue
			},
			/* 专业点击 */
			majorSelectClick(index) {
				this.major = index.majorName
				this.applyInFo.majorId = index.majorId
				this.computedWidth(this.applyInFo.majorId, 9)
			},
			/* 报名时间确定 */
			timeSelectClick(time) {
				this.applyTime = uni.$u.timeFormat(time, 'yyyy/mm/dd hh:MM:ss');
				this.timeShow = false
			},
			/* 学历点击 */
			eduSelectClick(index) {
				this.edu = index.name
				this.applyInFo.educationId = index.eduId
				this.computedWidth(this.applyInFo.educationId, 10)
			},
			saveData() {
				this.$axios.post(this.applyInForUrl.applyinfoAddUrl,this.applyInFo).then((res) => {
					if (res.data.success) {
						uni.showToast({
							icon: 'success',
							position: 'center',
							title: '已报名'
						});
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				})
			},
			upload() {
				/* 将this赋值_this */
				let _this = this
				/* 上传方法 */
				uni.chooseImage({
					/* 上传数量 */
					count: 1,
					/* 上传成功 */
					success(res) {
						/* 判断是否含有文件 */
						if (res.tempFilePaths.length > 0) {
							/* 上传地址 */
							let filePath = res.tempFilePaths[0]
							//进行上传操作
							uniCloud.uploadFile({
								filePath: filePath,
								/* 文件名 */
								cloudPath: res.tempFiles[0].name,
								onUploadProgress: function(progressEvent) {
									/* 文件id */
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
								},
								/* 上传成功 */
								success(res) {
									/* 回调图片地址 */
									_this.applyInFo.applyPhoto = res.fileID
									_this.computedWidth(_this.applyInFo.applyPhoto, 0)
								},
								/* 上传失败 */
								fail() {
									uni.showToast({
										icon: 'none',
										position: 'bottom',
										title: '网络连接错误'
									});
								},
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="less">

</style>
